import React, { useCallback, useEffect, useRef, useState } from "react";
import { ConfigService } from "../../../../../core/services/config_service";
import { ModelInfo } from "../../../../../core/types/ollama";
import { useUpload } from "../../../../store/useUpload";
import styles from "./FileUpload.module.css";
import { Button } from "../Button";
import { PlusIcon } from "../../../icons/PlusIcon";
import { Tooltip } from "../Tooltip";

const maxSize = 10 * 1024 * 1024; // MB
const multiple = true;
export const FileUpload: React.FC = () => {
    const fileInputRef = useRef<HTMLInputElement>(null);
    const configService = ConfigService.getInstance();
    const currentModelName = configService.getConfig().selectedModel;
    const addFiles = useUpload((state) => state.addFiles);
    const getSupportedTypes = useUpload((state) => state.getSupportedTypes);
    const [modelInfo, setModelInfo] = React.useState<ModelInfo | null>(null);
    useEffect(() => {
        async function init() {
            const info = await configService.getModelInfo(currentModelName);
            setModelInfo(info);
        }
        init();
    }, [currentModelName]);
    // 处理文件验证和添加
    const handleFiles = useCallback(
        (files: File[]) => {
            console.log("files: ", files);
            const validFiles = Array.from(files).filter((file) => {
                // 检查文件大小
                if (file.size > maxSize) {
                    console.warn(`文件过大: ${file.name}`);
                    return false;
                }

                return true;
            });

            if (validFiles.length > 0) {
                addFiles(validFiles);
            }
        },
        [addFiles, maxSize],
    );
    // 处理文件选择
    const handleFileSelect = useCallback(
        (event: React.ChangeEvent<HTMLInputElement>) => {
            const files = event.target.files;
            if (files) {
                handleFiles(Array.from(files));
            }
            // 重置input以允许选择相同文件
            if (fileInputRef.current) {
                fileInputRef.current.value = "";
            }
        },
        [handleFiles],
    );

    // 处理按钮点击
    const handleClick = useCallback(() => {
        fileInputRef.current?.click();
    }, []);
    if (!currentModelName) return null;
    if (!modelInfo) return null;
    const capabilities = modelInfo.capabilities || [];
    const supportedTypes = getSupportedTypes(capabilities);
    if (!supportedTypes || supportedTypes.length === 0) return null;
    return (
        <div className={styles.container}>
            <input
                ref={fileInputRef}
                type="file"
                className={styles.input}
                onChange={handleFileSelect}
                accept={supportedTypes.join(",")}
                multiple={multiple}
            />
            <Tooltip content="上传图片或文件" className={styles.button}>
                <Button onClick={handleClick}>
                    <PlusIcon />
                </Button>
            </Tooltip>
        </div>
    );
};
